<template>
  <div class="bg-[#f2f2f2] min-h-[100vh] pb-[30px]">
    <div class="w-full h-[50px] flex items-center px-[20px] justify-between bg-[#f8e3d3]">
      <div class="flex items-center">
        <img :src="getAssetsFile('home/news.png')" class="w-[20px] h-[17px]" />

        <div class="ml-[15px] text-[14px] flex items-center">
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
            <van-swipe-item v-for="item in noticeList" class="flex items-center">
              <span @click="noticeName(item)">{{ item.title }}</span>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="flex items-center" @click="notice">
        <div class="mr-[5px] text-[14px]">更多</div>
        <div><van-icon name="arrow" size="15" /></div>
      </div>
    </div>
    <div class="p-[15px]">
      <div>精选好保险</div>
      <div class="mt-[15px] w-full flex flex-wrap justify-between">
        <item :list="list"></item>
      </div>
      <div v-if="list.length <= 0 && !loading">
        <nodata></nodata>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import item from "./item.vue";
import nodata from "@/components/nodata.vue";
import { useRouter } from "vue-router";
import { indexGetIndexNotice, Index } from "@/utils/api";
import { ref, onMounted, inject, } from "vue";
const router = useRouter();
const noticeList = ref<noticeList[]>([]);
const list = ref<listType[]>([]);
const notice = () => {
  router.push("/h5/home/notice");
};
let loading = inject<any>("loading");
const getNotice = async () => {
  try {
    const res = await indexGetIndexNotice("");
    noticeList.value = res.msg;
  } catch (error) {

    getData();
  }

};
const getList = async () => {
  try {
    const res = await Index("");
    list.value = res.msg;
  } catch (error) {

    getData();
  }

};
const getData = async () => {
  getNotice();
  getList();
};
onMounted(() => {

  getData();

});

const noticeName = (item: any) => {
  router.push("/h5/home/noticeDetail?id=" + item.id);
};
</script>
<style scoped lang="scss">
.notice-swipe {
  height: 40px;
}
</style>
